<template>
  <div>
    <!-- 编辑弹窗 -->
    <cvue-dialog
      :dialogVisible="dialogVisible"
      :title="title"
      :dialogLoading="dialogLoading"
      dialogWidth="600px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body dialog-tree" slot="dialogBody">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item prop="orgId">
                <el-tree 
                  :data="data" 
                  :props="defaultProps" 
                  v-loading="treeLoading"
                  show-checkbox
                  default-expand-all
                  ref="tree"
                  node-key="id"
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  :default-checked-keys="checkIds"
                  @check="handleCheck"
                  ></el-tree>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import cvueDialog from '@/components/cvue-dialog'
import { validPhone, validIp } from '@/util/validator.js'
export default {
  name: 'roleMenuTree',
  components: {
    cvueDialog
  },
  data () {
    return {
      ruleForm: {
        appId: []
      },
      rules: {
        appId: [
          { required: true, message: '请选择应用', trigger: 'blur' }
        ]
      },
      disabled: false,
      dialogLoading: false,
      treeLoading: false,
      data: [
        // {
        //   name: '一级 1',
        //   children: [
        //     {
        //       name: '二级 1-1',
        //       children: [
        //         {
        //           name: '三级 1-1-1'
        //         }
        //       ]
        //     }
        //   ]
        // }
      ],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      checkIds: []
    }
  },
  mounted () {
     this.getTreeData()
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      var title = '菜单权限'
      return title
    },
    ...mapGetters(['token'])
  },
  methods: {
    // 触发事件
    handleClose () {
      this.$emit('handleClose')
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    confirmDialog () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var ids = []
          var selectNodes = this.$refs.tree.getCheckedNodes()
          var halfSelectNodes = this.$refs.tree.getHalfCheckedNodes()
          for (var i = 0; i < selectNodes.length; i++) {
            ids.push(selectNodes[i].id)
          }
          for (var j = 0; j < halfSelectNodes.length; j++) {
            ids.push(halfSelectNodes[j].id)
          }
          var params = {
            menu_id: ids.join(),
            role_id: this.$parent.rowData.id
          }
          this.dialogLoading = true
          this.$store.dispatch('manage/RoleMenuSave', params).then(res => {
            // console.log(res)
            this.$message({
              message: res.msg,
              duration: 2000,
              type: 'success'
            })
            this.$emit('confirmDialog')
            this.dialogLoading = false
          }).catch(err => {
            this.$message({
              message: err.msg,
              duration: 2000,
              type: 'error'
            })
            this.dialogLoading = false
          })
      } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getDetail () {
    },
    handleNodeClick () {
    },
    getTreeData () {
      var params = {
        role_id: this.$parent.rowData.id
      }
      this.dialogLoading = true
      this.$store.dispatch('manage/MenuTreeListGet', params).then(res => {
        this.data = this.getTree(res.data)
        var checkIds = []
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].checked && res.data[i].children.length == 0) {
            checkIds.push(res.data[i].id)
          }
        }
        this.checkIds = checkIds
        console.log(this.checkIds)
        this.dialogLoading = false
      }).catch(err => {
        this.$message({message: err.msg, duration: 2000, type: 'error'})
      })
    },
    // 遍历生成树
    getTree (treeData) {
      for (var i = 0; i < treeData.length; i++) {
        treeData[i].children = []
        for (var j = 0; j < treeData.length; j++) {
          if (treeData[i].id == treeData[j].pid) {
            treeData[i].children.push(treeData[j])
          }
        }
      }
      var arr = []
      for (i = 0; i < treeData.length; i++) {
        if (treeData[i].pid == '0') {
          arr.push(treeData[i])
        }
      }
      return arr
    },
    handleCheck (obj, select) {
      // console.log(select)
    }
  }
}
</script>
<style scoped>
.dialog-tree{
  height: 400px;
  overflow: auto;
}
</style>
